<template>
  <view class="container">
    <view class="link">
      <uni-easyinput v-model="linkUrl" placeholder="此处粘贴要提取的视频链接" @clear="clear"> </uni-easyinput>
      <view class="paste" v-if="!linkUrl" @click.stop="paste">粘贴链接</view>
    </view>
    <view class="analysis" @click="analysis">解析</view>
    <view class="resultShow" v-if="videoSrc">
      <video class="myVideo" :src="videoSrc" controls></video>
      <view class="save" @click="saveVideoWeiXin">保存本地</view>
    </view>
  </view>
</template>

<script>
import { analysisUrl } from '@/api/common.js'
export default {
  data() {
    return {
      linkUrl: '',
      videoSrc: '' // 视频地址
    }
  },
  onLoad() {},
  methods: {
    clear() {
      if (this.videoSrc) {
        this.videoSrc = ''
      }
    },
    // 粘贴链接
    paste() {
      let that = this
      uni.getClipboardData({
        success: function (res) {
          that.linkUrl = res.data
        }
      })
    },
    // 解析
    analysis() {
      if (!this.linkUrl) {
        return uni.showToast({
          icon: 'none',
          title: '请输入链接'
        })
      }
      uni.showLoading({
        title: '解析中...',
        mask: true
      })
      analysisUrl({
        url: this.linkUrl
      })
        .then((res) => {
          uni.hideLoading()
          this.videoSrc = res.data.videoSrc
          // this.saveVideoWeiXin(res.data.videoSrc)
        })
        .catch((err) => {
          uni.hideLoading()
        })
    },
    saveVideoWeiXin() {
      let that = this
      uni.showLoading({
        title: '保存中...',
        mask: true // 可选参数，设置为true时阻止用户操作
      })
      //提前发起授权申请
      wx.authorize({
        scope: 'scope.writePhotosAlbum',
        success: (res) => {
          console.log('授权成功---')
          wx.getSetting({
            withSubscriptions: true,
            success: (res) => {
              console.info(res.authSetting)
              if (res.authSetting['scope.writePhotosAlbum']) {
                wx.downloadFile({
                  url: that.videoSrc,
                  header: {
                    'content-type': 'application/json'
                  },
                  success: (res) => {
                    // console.log(res, '成功')
                    // uni.showToast({
                    //   icon: 'none',
                    //   title: '视频已保存到相册'
                    // })
                    //保存到相册
                    wx.saveVideoToPhotosAlbum({
                      filePath: res.tempFilePath,
                      success: (res) => {
                        uni.showToast({
                          icon: 'none',
                          title: '视频已保存到相册'
                        })
                        uni.hideLoading()
                      },
                      fail: (err) => {
                        console.log(err, 'err')
                        uni.showToast({
                          icon: 'none',
                          title: '保存失败'
                        })
                        uni.hideLoading()
                      }
                    })
                  }
                })
              } else {
                uni.hideLoading()
                wx.showModal({
                  cancelColor: 'cancelColor',
                  title: '提示',
                  content: '请开启相册访问权限',
                  success: (res) => {
                    if (res.confirm)
                      wx.openSetting({
                        withSubscriptions: true
                      })
                  }
                })
              }
            }
          })
        },
        fail: (res) => {
          wx.showToast({
            title: '拒绝授权后，请点击授权相册'
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  .link {
    position: relative;
    .paste {
      height: 25px;
      line-height: 25px;
      position: absolute;
      background: #e7e6eb;
      padding: 0 20rpx;
      color: rgb(41, 121, 255);
      border-radius: 40rpx;
      font-size: 26rpx;
      top: 6px;
      right: 20rpx;
      z-index: 2;
    }
  }
  .analysis {
    height: 80rpx;
    line-height: 80rpx;
    text-align: center;
    background: #3c96f3;
    color: #fff;
    border-radius: 40px;
    font-size: 30rpx;
    margin-top: 20rpx;
  }
  .resultShow {
    margin-top: 30rpx;
    .myVideo {
      width: 100%;
      height: 600rpx;
    }
    .save {
      background: radial-gradient(0% 70% at 50% 50%, #ff5b24 0%, #bc0a0d 100%);
      color: #fff;
      height: 90rpx;
      line-height: 90rpx;
      border-radius: 45rpx;
      text-align: center;
      font-weight: 500;
      font-size: 32rpx;
      margin-top: 20rpx;
    }
  }
}
</style>
